{% extends 'base.html' %}

{% block title %}用户登录 - 数据管理系统{% endblock %}

{% block content %}
<div class="container mt-5">
  <div class="row justify-content-center">
    <div class="col-md-6 col-lg-4">
      <div class="card shadow-lg border-0 rounded-lg">
        <div class="card-header bg-primary text-white text-center">
          <h3 class="mb-0">用户登录</h3>
        </div>
        <div class="card-body">
          {% with messages = get_flashed_messages(with_categories=true) %}
          {% if messages %}
          {% for category, message in messages %}
          <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
          {% endfor %}
          {% endif %}
          {% endwith %}

          <form method="POST">
            <div class="mb-3">
              <label for="username" class="form-label">用户名</label>
              <div class="input-group">
                <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
                <input type="text" id="username" name="username" class="form-control" required autofocus>
              </div>
            </div>

            <div class="mb-4">
              <label for="password" class="form-label">密码</label>
              <div class="input-group">
                <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
                <input type="password" id="password" name="password" class="form-control" required>
              </div>
            </div>

            <button type="submit" class="btn btn-primary w-100 py-2 mb-2">
              <i class="bi bi-box-arrow-in-right me-2"></i>登录
            </button>

            <div class="text-center">
              <a href="#" class="text-decoration-none text-muted small">忘记密码?</a>
            </div>
          </form>
        </div>
        <!-- <div class="card-footer text-center py-3 bg-light">
          <div class="small text-muted">
            还没有账号? <a href="#" class="text-primary">立即注册</a>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</div>
{% endblock %}